<template>
  <div class="pagination">
      <div class="left">

      </div>
      <div class="right">
            <a-pagination 
                    @change="onChange" 
                    :total="total"
                    :show-total="total => `共 ${total} 条`"
                    :page-size="pages.pageSize"
                    :default-current="pages.pageNum"
                    :pageSizeOptions="['5','10','20','50','100','200']"
                    showQuickJumper
                    showSizeChanger 
                />
      </div>
    
  </div>
</template> 
<script lang='ts'>
export default {
    props:['total','pages','getList'],
    setup(props:any){
      const onChange=(pageSize:number[],pageNum:number[],)=>{
          let obj = props.pages;
          obj.pageSize = pageSize;
          obj.pageNum = pageNum;
          props.getList(obj)
      }
      return{
          onChange,props
      }
    }
}
</script>>   
<style lang="less" scoped>
  .pagination{
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      >.left{
          flex: 1;
      }
      >.right{
          flex: 2;
          display: flex;
          justify-content: flex-end;
      }
  }
</style>